<template>
	<view>
		<view class="cu-bar bg-white solid-bottom padding">
		  <view class="action">
		    <button class="cu-btn bg-grey shadow" @tap="preStep">上一步</button>
		  </view>
		  <view class="action">
		    <button v-if="num<2" class="cu-btn bg-green shadow" @tap="nextStep">下一步</button>
			<button v-if="num>=2" class="cu-btn bg-blue shadow" @tap="submitForm">提交添加</button>
		  </view>
		</view>
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num" :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view v-if="num==0" class="padding">
			<view v-if="!src" class="flex align-center justify-center" style="height:400rpx;">
				<image :src="form.img" style="width:150px;height:150px;" />
			</view>
			<view style="height:400rpx;" v-if="!!src">
				<Cropper ref="cropper"
				width="100%"
				height="400rpx"
				cutWidth="150"
				:boundDetect="true"
				:keepRatio="true"
				:disableCtrl="true"
				:zoom="1"
				:angle="0"
				:src="src"
				@cropped="cropped"
				></Cropper>
			</view>
			<view class="flex flex-direction">
				<button class="cu-btn lg" @tap="clickUpload">选择形象图片</button>
				<view class="cu-form-group">
					<view class="title">型号名称</view>
					<input v-model="form.name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">主板类型</view>
					<input v-model="form.boardType"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">排序数字</view>
					<input v-model="form.orderNumber"></input>
				</view>
			</view>
		</view>
		<view v-if="num==1">
			<WidthsArr v-model="form.widthsArr"></WidthsArr>
		</view>
		<view v-if="num==2">
			<GoodsWayArr v-model="form.goodsWayArr" :widthsArr="form.widthsArr"></GoodsWayArr>
		</view>
	</view>
</template>

<script>
	import Cropper from '@/components/nice-cropper/cropper.vue';
	import NumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import WidthsArr from '@/components/widths-arr.vue';
	import GoodsWayArr from '@/components/goods-way-arr.vue';
	export default {
		components:{
			Cropper,
			NumberBox,
			WidthsArr,
			GoodsWayArr
		},
		data() {
			return {
				numList: [{
						name: '基本信息'
					}, {
						name: '宽度数据'
					}, {
						name: '货道数据'
					}
				],
				num:0,
				src:'',
				croppedSrc:'',
				form:{
					img:'',
					name:'',
					orderNumber:0,
					boardType:'DK',
					goodsWayArr:[],
					widthsArr:[[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1]]
				}
			};
		},
		methods:{
			_createGoodsWayArr(){
				this.form.goodsWayArr=[];
				let channelNumber=0;
				this.form.widthsArr.forEach((itemY,y)=>{
					itemY.forEach((itemX,x)=>{
						this.form.goodsWayArr.push({
							x:x,
							y:y,
							width:itemX,
							maxStore:5,
							channelNumber:channelNumber
						})
						channelNumber++;
					});
				});
			},
			_urlTobase64(url,cb) {
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						let toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						cb(toBase64Url);
					}
				});
			},
			nextStep(){
				if(this.num==1){
					this._createGoodsWayArr();
				}
				if(this.num<this.numList.length-1){
					this.num++;
				}
				
			},
			preStep(){
				if(this.num>0){
					this.num--;
				}
			},
			clickUpload() {
				wx.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success:(res)=>{
				    const tempFilePaths = res.tempFilePaths;
					this.src=res.tempFilePaths[0];
				  }
				})
			},
			cropped(imagePath, imageInfo){
				this.croppedSrc=imagePath;
			},
			submitForm(){
				console.log(this.form);
				if(!!this.croppedSrc){
					this._urlTobase64(this.croppedSrc,(data)=>{
						this.form.img=data;
						this.$u.api.admin_modelAdd(this.form).then(data => {
							uni.navigateBack();
						})
					})
				}else{
					uni.showToast({
						title:'您必须选择一张形象图片',
						icon:false
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.title{
	width:160rpx;
}
.box{
	position:absolute;
	height:100rpx;
	border:2rpx solid red;
	box-sizing: border-box;
}
</style>
